<template>
<div class="dialog-ExampleItemDialog">
	<el-dialog
		:title="dialogTitle"
		:visible.sync="dialogExampleItemVisible"
		width="600px"
		:before-close="hideDialog">
		<el-form :inline="true" ref='formRef' :model="formData" :rules="formRules">
			<el-form-item label="审批人1" prop="name">
				<el-input v-model="formData.name" placeholder="审批人" :disabled='isReadonly'></el-input>
			</el-form-item>
			<el-form-item label="审批人2" prop="sex">
				<el-select v-model="formData.sex" placeholder="请选择活动区域" :disabled='isReadonly'>
					<el-option v-for="data in sexDic" :value="data.value" :key="data.value">{{ data.label }}</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="审批人3" prop="date">
				<el-date-picker placeholder="选择时间" v-model="formData.date" type='date' :disabled='isReadonly'></el-date-picker>
			</el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button v-if='isReadonly' type="primary" @click="hideDialog">关 闭</el-button>
			<el-button v-if='!isReadonly' @click="hideDialog">取 消</el-button>
			<el-button v-if='!isReadonly' type="primary" @click="submitForm">确 定</el-button>
		</span>
	</el-dialog>
</div>
</template>

<script>
// @ is an alias to /src
import { post, get, request } from '@/common/service'

export default {
	name: 'ExampleItemDialog',
	props: {
		// 是否只读模式
    	isReadonly: {
    		type: Boolean,
    		default : function () {
    			return false;
    		}
    	},
		// 是否是编辑模式
    	isEdit: {
    		type: Boolean,
    		default : function () {
    			return false;
    		}
    	},
    	// 非新增模式下数据
    	itemData: {
    		type: Object,
    		default : function () {
    			return {};
    		}
    	},
    },
	data () {
        return {
        	// 表单-校验规则
        	formRules: {
        		name: [
		            { required: true, message: '请输入名称', trigger: 'blur' },
		        ],
        		sex: [
		            { required: true, message: '请输入名称', trigger: 'blur' },
		        ],
		        date: [
		            { required: true, message: '请输入名称', trigger: 'blur' },
		        ],
        	},
        	// 表单-数据
        	formData: {
        		name: '',
        		sex: '',
        		date: '',
        	},
        	// 字典-性别
            sexDic: [{
                value: '1',
                label: '男'
            },{
                value: '2',
                label: '女'
            }],
        };
    },
    methods: {
    	// 关闭弹窗
		hideDialog (isReload) {
			this.$store.commit('setDialogExampleItemVisible', false);
			let isReloadFlag = false;
			if(typeof isReload == 'boolean' && isReload) {
				isReloadFlag = true;
			}

			this.$emit('hideDialog', isReloadFlag);
			this.resetForm();
		},
		// 点击确定
		submitForm () {
			this.$refs['formRef'].validate((valid) => {
				if (valid) {
					console.log('submit!');
					this.sendForm({
						name: this.formData.name,
						sex: this.formData.sex,
						date: this.formData.date,
					});
				}
			});
			
		},
		// 发送表单
		sendForm (data) {
			post(this.Api('editExampleListItem'), data).then((res) => {
                if(res.flag == this.statusCode.successCode) {
                	this.$message.success('操作成功');
                    this.hideDialog(true);
                }
            });
		},
		// 重置表单
		resetForm () {
			this.$refs['formRef'].resetFields();
			this.formData = {
        		name: '',
        		sex: '',
        		date: '',
        	};
		},
    },
    computed: {
		// 弹窗标题
		dialogTitle () {
			if(this.isReadonly) {
				return '详情';
			}
			if(this.isEdit) {
				return '编辑';
			}

			return '新增';
		},
		// 弹窗显隐
		dialogExampleItemVisible () {
			return this.$store.state.dialogExampleItemVisible;
		},
	},
	watch: {
		dialogExampleItemVisible () {
			// 打开弹窗
			if(this.dialogExampleItemVisible) {
				if(this.itemData && this.itemData.primaryId) {
					this.formData = JSON.parse(JSON.stringify(this.itemData));
				}
			}
		}
	}
}
</script>
